
<template>
 <div v-loading="loading" class="Main">
   <div class="w1440">
      <div class="flex_fsw">
         <div class="MainLeft w72">
            <div class="HomeNews bgwhite mb15">
               <div class="HomeTit">
                  <div class="tit">论坛推荐</div>
                    <a @click="goToMorePage('/recommendForm', 'recommend')" class="pointer more">更多</a>
               </div>
               <div class="HomeList">
                  <dl>
                     <dt>
                        <router-link :to="'/commentpost?id='+recommendPostList[0]?.id" tag="a">
                           <div class="tit"><em class="dot">{{recommendPostList[0]?.title}} </em>
                                <!-- <i>人民网专访</i> -->
                            </div>
                           <div class="dec" v-html="clearSpaceStr(newPostList[0]?.contentBrief)"></div>
                           <div class="date">发布于 {{newPostList[0]?.createTime}}</div>
                        </router-link>
                     </dt>
                     <dd v-for="(item, index) in recommendPostList" :key="index" :class="['dot', {hide: index == 0}]">
                        <router-link :to="'/commentpost?id='+item.id" tag="a">{{item.title}}</router-link>
                    </dd>
                  </dl>
               </div>
            </div>
            <div class="Homead mb15">
               <div class="item">
                  <a>
                     <div class="img imgbox"><span><img src="../assets/uploadfiles/image/homead.jpg" alt=""></span></div>
                  </a>
               </div>
            </div>
            <!-- 动态版块 -->
            <div class="HomeNews bgwhite mb15">
               <div class="HomeTit">
                  <div class="tit">最新更新</div>
                  <a @click="goToMorePage('/recommendForm', 'nearestTime')" class="pointer more">更多</a>
               </div>
               <div class="HomeList" v-if="newPostList.length">
                  <dl>
                     <dt :class="[{'dt_img': false}]">
                        <router-link :to="'/commentpost?id='+newPostList[0]?.id" tag="a">
                           <!-- <div class="img">
                                <div class="imgbox"><span><img :src="newPostList[0].media[0]" :alt="newPostList[0].media[0]"></span></div>
                           </div> -->
                           <div class="tit"><em class="dot">{{newPostList[0]?.title}}</em></div>
                           <div class="dec" v-html="clearSpaceStr(newPostList[0]?.contentBrief)"></div>
                           <div class="date">发布于  {{newPostList[0]?.createTime}}</div>
                        </router-link>
                     </dt>
                     <dd v-for="(item, index) in newPostList" :key="index" :class="['dot', {hide: index == 0}]">
                        <router-link :to="'/commentpost?id='+item.id" tag="a">{{item.title}}</router-link>
                    </dd>
                  </dl>
               </div>
            </div>

         </div>
         <div class="MainLeftRight  w26">
            <!-- 热门帖子 -->
            <SortPost />
            <!-- 热门博主 -->
            <HotBlogger />
         </div>
      </div>
   </div>
</div>
</template>

<script setup name="Home">
import { postApi } from '@/api';
import { computed, ref, reactive, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
// 组件
import HotBlogger from '@/components/HotBlogger.vue'; // 热门博主
import SortPost from '@/components/SortPost.vue'; // 排行帖子

// 路由
const router = useRouter();

/**
 * @name Data
 */
const loading = ref(true);

 /**
 * @name 计算属性
 */
// 去除空格
const clearSpaceStr = computed(() => {
    return (str) => {
        if(!str) return '';
        let newStr = str.replace(/&nbsp;\s*/g, ' ');
        return newStr.replace(/\s*/g,''); // 去除所有空格，包括换行、回车、制表符
    }
})

/**
 * @name 生命周期
 */
onBeforeMount(() => {
    getNewPostList()
    getPostList()
})

/**
 * @name 查看更多
 */
const goToMorePage = (path, type) => {
    sessionStorage.setItem('recommendActiveTab', type);
    router.push(path)
}


/**
 * @name 最新更新
 */
const newPostList = ref([]);
const queryParam = reactive({
    isRecommend: false,
    keyword: "",
    sortField: "createTime",
    sortOrder: "desc",
    pageNo: 1,
    pageSize: 8
});
const getNewPostList = function() {
    postApi.getPostList(queryParam).then((res) => {
        newPostList.value = res.result.list;
    }).catch((err) => {}).finally(() => {
        loading.value = false;
    })
}

/**
 * @name 论坛推荐
 */
const recommendPostList = ref([]);
const queryParams = reactive({
    isRecommend: true,
    keyword: '',
    sortField: 'createTime',
    sortOrder: 'desc',
    pageNo: 1,
    pageSize: 8
})
const getPostList = () => {
    postApi.getPostList(queryParams).then((res) => {
        recommendPostList.value = res.result.list;
    }).catch((err) => {})
}


// 获取动态版块（暂时废弃）
// 分类参数
// const categoryParams = reactive({
//     plateId: '',
//     topicId: 2,
//     sortField: 3,
//     sortOrder: 'DESC/ASC'
// })
// const dynamicPart = ref([]);
// const getCategoryList = function() {
//     postApi.getCategoryList().then((res) => {
//         let {data} = res;
//         data.filter((item) => {
//             console.log(item.plateList)
//             item.plateList.filter((childItem) => {
//                 let chidlrenArr = {
//                     name: childItem.title,
//                     partId: childItem.id,
//                     postList: []
//                 };
//                 categoryParams.plateId = childItem.id;
//                 postApi.getPratPostList(categoryParams).then((res) => {
//                     chidlrenArr.postList = res.result.list;
//                 })
//                 dynamicPart.value.push(chidlrenArr)
//             })
//         })
//     }).catch((err) => {})
// }


</script>

<style lang="less" scoped>
</style>